<template>
	<div id="inviteSure">
		<view
			style="width: 750upx;padding-top: 40upx;display: flex;justify-content: flex-start;position: absolute;top: 0;z-index:9;padding-right: 25rpx;box-sizing: border-box;">
			<view style="width: 35upx;height: 35upx;margin-top: 24upx;margin-left: 24rpx;" @click="fanhui">
				<u-icon name="arrow-left" color='#c0c4cc' size='20'></u-icon>
			</view>
		</view>
		<div class="home_top">
			<div class="home_top_img">
				<image src="https://wx.sjcmhz.com/static/image/index15.png"></image>
			</div>
			<div class="home_top_title">
				苏江邀约
			</div>

			<!-- 进度条 -->
			<div class="invite_jdt">
				<div class="invite_jdt_icon_act">

				</div>
				<div class="invite_jdt_line" v-if="index == 1">
					<img src="https://wx.sjcmhz.com/static/image/index17.png" alt="">
				</div>
				<div class="invite_jdt_line" v-if="index !== 1">
					<div class="invite_jdt_line_line">

					</div>
				</div>

				<div class="invite_jdt_icon_act">

				</div>
				<div class="invite_jdt_line" v-if="index == 2">
					<img src="https://wx.sjcmhz.com/static/image/index17.png" alt="">
				</div>
				<div class="invite_jdt_line" v-if="index !== 2">
					<div class="invite_jdt_line_line">

					</div>
				</div>
				<div class="invite_jdt_icon">

				</div>
			</div>
			<!-- invite_jdt -->
			<div class="invite_jdt_text">
				<div :class="index==0?'invite_jdt_text_items_act invite_jdt_text_items':'invite_jdt_text_items' ">
					邀约申请
				</div>
				<div class="invite_jdt_text_items">
					入住准备
				</div>
				<div class="invite_jdt_text_items">
					准备完成
				</div>
			</div>
			<!-- cont -->
			<div class="invite_cont">
				<div class="invite_cont_title">
					入住须知
				</div>
				<div class="invite_cont_dis">
					请仔细阅读和学习行政讲解：
				</div>
				<div class="invite_cont_dis_cont">
					<rich-text :nodes="content"></rich-text>
				</div>

				<div class="invite_cont_dis_yz">
					点击我已知晓 代表学习并同意入住须知
				</div>


				<div class="invite_cont_btn" @click='inviteSureEvnet'>
					我已知晓
				</div>
			</div>
		</div>

		<!-- <u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				index: 1,
				show: false,
				mode: 'single',
				time: undefined,
				value2: null,
				roomDetail: {},
				content:''
			}
		},
		mounted() {
			this.getRoom()
		},
		methods: {
			async getRoom() {
				const {
					data
				} = await this.$request(this.$Api.indexRoom, {}, "POST")
				if (data.code !== 0) return
				this.roomDetail = data.data
				var richtext = data.data.house;
				const regex = new RegExp('<img', 'gi');
				richtext = richtext.replace(regex, `<img style="max-width: 100%;"`)
				this.content = richtext;
				console.log('111', data)
			},
			fanhui() {
				uni.navigateBack()
			},
			confirm(e) {
				console.log(e);
				this.time = e[0]
				this.show = !this.show
			},
			tiemEvent() {
				this.show = !this.show
			},
			inviteSureEvnet() {
				console.log('inviteSureEvnet', 1111)
				uni.showModal({
					title: '提示',
					content: '是否已核对设备和讲解过相关事宜？',
					success: async (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/invite/inviteSure2'
							})

						}
					}
				});


			}
		}
	}
</script>

<style lang="scss">
	#inviteSure {
		padding-bottom: 100rpx;

		.home_top {
			width: 750rpx;
			height: 706rpx;
			position: relative;
			// background: url('https://wx.sjcmhz.com/static/image/index15.png');
			// background-size: cover;

			.home_top_img {
				image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
				}
			}

			.home_top_title {
				font-size: 60rpx;
				color: #fff;
				position: absolute;
				top: 126rpx;
				left: 30rpx;
			}
		}

		// 进度条
		.invite_jdt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			top: 238rpx;
			left: 0;
			width: 100%;
			padding: 0 50rpx;
			box-sizing: border-box;

			.invite_jdt_icon {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				background: #E0E0E0;
				border: 2px solid #979797;
				opacity: 0.5;

			}

			.invite_jdt_icon_act {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				background: #F8E71C;
				border: 2px solid #F5A623;
			}

			.invite_jdt_line {
				display: flex;
				align-items: center;
				width: 246rpx;
				height: 2px;

				image {
					width: 100%;
					height: 100%;
					margin: 0 6rpx 0 12rpx;
				}

				.invite_jdt_line_line {
					width: 100%;
					height: 100%;
					margin: 0 6rpx 0 12rpx;
					background: #E0E0E0;
				}
			}
		}

		.invite_jdt_text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			top: 300rpx;
			left: 0;
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			color: #fff;

			.invite_jdt_text_items {
				font-size: 24rpx;
			}

			.invite_jdt_text_items_act {
				color: #F8E71C;
			}
		}

		// invite_cont
		.invite_cont {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			position: absolute;
			top: 370rpx;
			left: 0;
			width: 100%;
			// padding: 0 24rpx;
			box-sizing: border-box;
			background: #fff;
			width: 690rpx;
			min-height: 954rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 16rpx 10rpx rgba(36, 95, 255, 0.06);
			border-radius: 12rpx;
			left: 30rpx;
			margin-bottom: 100rpx;
			padding: 0 44rpx;

			.invite_cont_title {
				font-size: 36rpx;
				margin-top: 44rpx;
			}

			.invite_cont_dis {
				color: #666;
				font-size: 28rpx;
				margin-top: 18rpx;
			}

			.invite_cont_dis_cont {
				margin-top: 30rpx;
				color: #666;
				font-size: 28rpx;
				// line-height: 55rpx;
			}

			.invite_cont_dis_img {
				width: 596rpx;
				height: 320rpx;
				background: #f5f5f5;
				margin-top: 38rpx;

				image {
					width: 100%;
					height: 100%;
					background: #f5f5f5;
				}
			}

			.invite_cont_dis_yz {
				font-size: 28rpx;
				color: #666666;
				margin-top: 28rpx;
			}

			.invite_cont_zy {
				color: #2E61FF;
				font-size: 28rpx;
				margin-top: 54rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.spanD {
					display: flex;
					align-items: center;
				}

				.span {
					width: 90rpx;
					height: 34rpx;
					background: #2E61FF;
					border-radius: 17rpx;
					// border: 2rpx solid #2E61FF;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					min-width: 90rpx;
					margin-left: 10rpx;
				}
			}

			.invite_cont_line {
				width: 602rpx;
				height: 2rpx;
				border-bottom: 2rpx solid #DDDDDD;
				margin-top: 44rpx;
			}

			.invite_cont_time {
				font-size: 32rpx;
				padding: 26rpx 0 36rpx 0;
			}
		}

	}

	.invite_cont_items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		width: 600rpx;
		height: 70rpx;
		background: #F5F5F5;
		padding: 0 36rpx 0 24rpx;
		box-sizing: border-box;
		color: #666666;
	}

	.invite_cont_yy {
		width: 600rpx;
		height: 174rpx;
		background: #F5F5F5;
		font-size: 28rpx;
		padding: 16rpx 22rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
		color: #666666;
	}

	.invite_cont_btn {
		width: 600rpx;
		height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		background: #9013FE;
		margin-top: 20rpx;
	}
</style>